.card-enter, .card-appear {
    opacity: 0;
    transform: scale(.8);
  }

  .card-enter-active, .card-appear-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 300ms, transform 300ms;
  }

  .card-exit {
    opacity: 1;
  }

  .card-exit-active {
    opacity: 0;
    transform: scale(.8);
    transition: opacity 300ms, transform 300ms;
  }

// 
.friend-enter {
    opacity: 0;
    transform: translate(-100%);
}

.friend-enter-active {
    opacity: 1;
    transform: translate(0%);
    transition: all 500ms;
}

.friend-exit {
    opacity: 1;
    transform: translate(0%);
}

.friend-exit-active {
    opacity: 0;
    transform: translate(-100%);
    transition: all 500ms;
}
